<template>
  <div class="question-container">
    <div>
      <header class="modify-header">
        <div class="left">
          <span class="arrow" @click="$router.back()"><i class="el-icon-arrow-left" />返回</span>
          <span>|</span>
          <span>已提交作业</span>
        </div>
        <div class="right">
          课程管理系统
        </div>
      </header>
    </div>
    <div class="eltable">
      <el-table :data="submittedAssignmentListData" stripe class="data_table">
        <el-table-column prop="id" label="提交作业编号" align="center">
        </el-table-column>
        <el-table-column prop="questionId" label="问题编号" align="center">
        </el-table-column>
        <el-table-column prop="assignmentId" label="作业编号" align="center">
        </el-table-column>
        <el-table-column prop="question.questionTopicIntroduction" label="前言">
        </el-table-column>
        <el-table-column prop="assignment.endTime" label="截止时间" align="center">
        </el-table-column>
        <el-table-column prop="submissioUrl" label="提交文件" align="center">
          <template slot-scope="scope">
            <span v-if="!scope.row.submissioUrl">无</span>
            <el-link v-else :href="scope.row.submissioUrl" type="primary" target="_blank" class="underline-link"><i
                class="el-icon-folder-opened" style="font-size: 1.5em"></i></el-link>
          </template>
        </el-table-column>
        <el-table-column prop="grade" label="评分" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center" style="width: 250px;">
          <template slot-scope="scope">
            <el-button type="text" size="small" class="delBut"
              @click="deleteHandle(scope.row.assignment.endTime, scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="page" :page-size="size"
        :page-sizes="pageSizes" layout="total, sizes, prev, pager, next, jumper" :total="total" style="float: right;">
      </el-pagination>
    </div>
  </div>
</template>

<script>

import { getSubmittedAssignmentListAPI,deleteSubmittedAssignmentsAPI } from '@/api/submittedAssignments'
import { getUserIDLocalStorage } from "@/utils/utilLocalStorage";

export default {
  data() {
    return {
      submittedAssignmentList: [],
      studentId: '',
      // 分页
      page: 1, //第几页
      size: 10, //一页多少条
      total: 0, //总条目数
      pageSizes: [5, 10, 20, 30], //可选择的一页多少条
      submittedAssignmentListData: [], // 作业表显示
    }
  },
  created() {
    this.getTabelData2();
  },
  mounted() {
    //  console.log(getUserIDLocalStorage());
    this.studentId = getUserIDLocalStorage()
    this.getSubmittedAssignmentList()
  },
  methods: {
    // 获取该学生的提交作业
    async getSubmittedAssignmentList() {
      try {
        const res = await getSubmittedAssignmentListAPI('', getUserIDLocalStorage(), '')
        this.submittedAssignmentList = res.data
        this.getTabelData()
      } catch (error) {
        console.log(error);
      }
    },
    // 作业分页
    getTabelData() {
      //为全部数据
      this.submittedAssignmentListData = this.submittedAssignmentList.slice(
        (this.page - 1) * this.size,
        this.page * this.size
      );
      this.total = this.submittedAssignmentList.length
    },
    //获取表格数据，自行分页（splice）
    getTabelData2() {
      let data = JSON.parse(JSON.stringify(this.submittedAssignmentList))
      this.submittedAssignmentListData = data.splice(
        (this.page - 1) * this.size,
        this.size
      );
      this.total = this.submittedAssignmentList.length
    },
    //page改变时的回调函数，参数为当前页码
    currentChange(val) {
      console.log("翻页，当前为第几页", val);
      this.page = val;
      this.getTabelData2();
    },
    //size改变时回调的函数，参数为当前的size
    sizeChange(val) {
      console.log("改变每页多少条，当前一页多少条数据", val);
      this.size = val;
      this.page = 1;
      this.getTabelData2();
    },
    // 题目选择页面
    handlePageChange(currentPage) {
      this.tablePage.pageNum = currentPage
      // 在此刷新数据
      this.getSubmittedAssignmentList()
    },
    handleSizeChange(pageSize) {
      this.tablePage.pageSize = pageSize
      // 在此刷新数据
      this.getSubmittedAssignmentList()
    },

    // 删除提交作业
    deleteHandle(endTime, submittedAssignmentsId) {
      // 确保endTime不为空
      if (endTime) {
        // 将endTime字符串转换为日期对象
        const endTimeDate = new Date(endTime);
        // 获取当前时间
        const now = new Date();

        // 比较当前时间是否小于endTime
        if (now < endTimeDate) {
          // 当前时间小于endTime，可以进行删除操作或其他逻辑
          console.log('当前时间小于endTime，可以执行删除操作。');
          this.$confirm('确认删除该提交作业, 是否继续?',  {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // this.deleteQuestion(questionId)
            deleteSubmittedAssignmentsAPI(submittedAssignmentsId, '', '').then((res) => {
              if (res.code === 200) {
                this.$message.success('删除该提交作业成功！')
                this.getSubmittedAssignmentList()
              } else {
                this.$message.error('删除提交作业失败！')
              }
            }).catch(error => {
              this.$message.error('删除出错了！')
              console.log(error);
            })
          })
        } else {
          // 当前时间不小于endTime，不能执行删除操作
          console.log('当前时间不小于endTime，不能执行删除操作。');
          this.$message.error('已超过截止时间不可删除')

        }
      } else {
        // endTime为空，不能进行时间比较
        console.log('endTime为空，无法进行比较。');
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.question-container {
  // margin-left: 50px;
  margin-right: 50px;

  .modify-header {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    height: 64px;
    line-height: 64px;
    font-size: 16px;
    font-weight: bold;
    background-color: #fff;

    .left {
      span {
        margin-right: 4px;
      }

      .arrow {
        cursor: pointer;
      }
    }

    .right {
      text-align: right;
    }
  }

  .tableBar {
    display: flex;
    justify-content: right;
    margin: 10;
  }

  .eltable {
    margin-left: 2%;
    margin-right: 2%;
  }

  .normal-btn continue {
    margin-left: 10px;
    background-color: aquamarine;

  }

  .tableLab {
    margin-left: 0;
  }

  .pagination {
    display: flex;
    justify-content: right;
    margin-right: 2%;
  }
}

// 下划线
.underline-link {
  text-decoration: underline;
  /* 添加下划线 */
}
</style>